<template>
  <div class="setting-container">
    <div class="setting-item">
      <span>主题色</span>
      <el-color-picker v-model="appStore.themeColor"
                       @change="changeThemeColorEvent"/>
    </div>

    <div class="setting-item">
      <span>模式</span>
      <el-button circle @click="appStore.toggleDark" class="theme-button">
        {{ appStore.isDark ? '🌙' : '☀️' }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app.ts'
import { onMounted } from 'vue'
const appStore = useAppStore()

onMounted(() => {
  appStore.themeColor = appStore.getThemeColor()
})

const changeThemeColorEvent = (value: string) => {
  appStore.setThemeColor(value)
}
</script>

<style scoped lang="scss">
.setting-container {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .setting-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 10px;
  }
}
</style>
